<template>
  <div >
      <div  class="box">
     <div class="menu">
   <div class="menu__content">    
        <div class="btn_share" id="id_btn_share" href="javascript:;">
          <div class="mask"></div>
          <a  @click="add"  class="fx" rel="external"  href="javascript:;"></a>
         
            
        </div>
        <a v-show="myshow" id="id_btn_home" >app下载</a>
    </div>
</div> 
    </div>
  </div>
</template>
<script>
import { mapState,mapMutations } from "vuex";
export default {
  name:"HomePage",
  data() {
    return {
     };
  },
  components:{},
  computed:{
 ...mapState({
   
       myshow: state => state.myshow,
    }),
     count () {
      // 第二种用法
      return store.state.count
    }

  },
   watch: {
   
  },
 methods: {
     add () {
   
      this.$store.state.count++
    }}
 
}
</script>
<style lang="less" scoped>
* {
  touch-action: none;
}
.no{display: none;}
 .col2{border-radius: 20px;
        position: absolute;
        overflow: hidden;
        height: 40px;
        top:50%;
        transform: translateY(-50%);
        z-index: 1;
    background: #ffffff;
   -box-shadow: inset 0 0 6px rgb(221 58 31 / 60%);}
    .col3{border-radius: 20px;
        position: absolute;
        overflow: hidden;
        height: 40px;
      top:20px;
      left:20px;  
        z-index: 1;
    background: #ffffff;
    box-shadow: inset 0 0 6px rgb(221 58 31 / 60%);}
.menu{height:80px;
background-color:#272727 ;
overflow: hidden;
color: #000;
font-size: 12px;
line-height: 1.5;
font-family: Tahoma,\5FAE\8F6F\06C5\0ED1,"hiragino sans gb",Helvetica,Arial;
}
.menu__content{
position: relative;
    margin: 20px auto;
    height: 40px;
}
.menu__title {
    float: left;
    margin-top: -5px;
    font-size: 100%;
    margin: 0;
    padding: 0;
    font-weight: bold;
}
.menu__link {
    display: block;
}
.menu__logo {
    width: 162px;
    border: none;
    height: 46px;
}
.menu .btn_share {
  position: relative;
    width: 120px;
    height: 40px;
    line-height: 40px;
  
    border-radius: 20px;
    text-align: center;
    display: block;
    float: right;
    margin-left: 27px;
  cursor: pointer;
    font-size: 20px;
    text-decoration: none;
  a[rel = "external"]:before {
    content:url(../../static/img/huan.png);
}
    .fx{position: absolute;
   text-decoration: none;
       display: block;
         color: #fff;
         left:44%;
        transform: translateX(-50%);
    z-index: 3;}
    .huanyhuan{position: absolute;
   text-decoration: none;
       display: block;
         color: #11bf72 ;
         font-size: 28px;
         left:80%;
         width: 32px;
         height: 32px;
            top:85%;
        transform: translateX(-50%);
           animation: rotate 5s linear infinite;
    z-index: 4;}
    .mask{
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0px;
      bottom: 0px;
      left: 0px;
      right: 0;
      z-index: 3;
      background: #272727;
      opacity: .4;
    }
}
#id_btn_home{
   position:absolute;
   right: 200px;
transform: translateX(0px);
    display: block;
  top:0px;
    line-height: 40px;
    font-size: 20px;
    color: #fff;
    text-decoration: none;

}


</style>